<template>
  <el-dialog
    id="createMailDialog"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    v-if="dialogVisible"
    :title="$t('m.weiyou_newail')"
    :modal="false"
    :show-close="false"
    width="1250px"
    top="0"
    custom-class="createDialog"
    append-to-body
  >
    <div
      v-if="dialogVisible"
      class="createMask"
      style="position: fixed;top:0;left:0;right:0;bottom:0;opacity: .5;background: #000;z-index: -1"
    />
    <el-form
      ref="mailForm"
      :model="createForm"
      :label-width="formLabelWidth"
    >
      <el-form-item
        :label="$t('m.weiyou_recipients')"
        prop="selectUsersNameSting"
      >
        <el-autocomplete
          v-model="createForm.selectUsersNameSting"
          :fetch-suggestions="querySearchAsync"
          @select="handleSelect"
          :trigger-on-focus="false"
          :placeholder="$t('m.weiyou_pleaseschoose')"
          :popper-append-to-body="false"
          popper-class="my-autocomplete"
          highlight-first-item="true"
        >
          <template #suffix>
            <i
              v-if="selectUsersName.length > 1"
              @click="openUserDialog"
              class="jeicon jeicon-more"
            />
            <user-names
              ref="userNameDialog"
              :userMap="requestMap"
              :selectedIdList="selectUsersId"
              :showType="'create'"
              @dragUser="dragUser"
            />
            <el-dropdown @command="handleChoose">
              <span class="el-dropdown-link">
                <i class="jeicon jeicon-user-add" />
              </span>
              <el-dropdown-menu
                slot="dropdown"
                class="downMenu"
              >
                <el-dropdown-item
                  v-for="(item, index) in types"
                  :key="index"
                  :command="item"
                  :style="choosedType == item.code ? {color: '#409EFF', 'font-weight': 700}: ''"
                >
                  {{ lang == 'zh_CN' ? item.text : item.entext }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>

          <template slot-scope="{ item }">
            <div class="name">
              <div class="headerImg">
                <img
                  v-if="item.photoUrl"
                  :src="item.photoUrl"
                  alt=""
                >
                <span v-else>
                  {{ item.name.substring((item.name.length-2),item.name.length) }}
                </span>
              </div>
              <div style="padding-left: 45px">
                {{ item.name }}
              </div>
            </div>
          </template>
        </el-autocomplete>
      </el-form-item>

      <el-form-item prop="checkedRules">
        <el-checkbox-group
          v-model="createForm.checkedRules"
          :min="0"
          :max="4"
        >
          <el-checkbox
            v-for="(rule,index) in rules"
            :label="lang == 'zh_CN' ? rule.text : rule.entext"
            :key="index"
            :disabled="rule.disabled"
          >
            {{ lang == 'zh_CN' ? rule.text : rule.entext }}
          </el-checkbox>
          <el-tooltip
            :disabled="mainUserNames.length === 0"
            :content="mainUserNames.join(',')"
            effect="dark"
            placement="top"
            popper-class="zhusongren"
          >
            <el-button
              @click="setMainUser"
              type="text"
              class="setOwner"
            >
              {{ $t('m.weiyou_setmastersender') }}
            </el-button>
          </el-tooltip>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item
        :label="$t('m.weiyou_theme')"
        prop="mailTheme"
      >
        <el-input
          v-model="createForm.mailTheme"
          autocomplete="off"
          maxlength="100"
          class="zt-input"
          show-word-limit
        />
      </el-form-item>

      <el-form-item
        :label="$t('m.weiyou_content')"
        class="ue-editor"
      >
        <div
          id="mail-uEditor"
          style="height:320px"
        />

        <el-button
          @click="openFsEditor"
          class="fsIcon"
          type="text"
          icon="fa fa-clone"
        />
      </el-form-item>

      <el-form-item class="formatCont">
        {{ $t('m.weiyou_requirements') }}
      </el-form-item>
      <el-form-item>
        <el-button
          @click.stop.prevent="selectImage"
          type="text"
          icon="jeicon jeicon-attachment-o"
          class="fbBtns"
        >
          {{ $t('m.weiyou_accessory') }}
        </el-button>
        <el-button
          ref="emojiButton"
          @click.stop.prevent="showEmojis"
          type="text"
          icon="jeicon jeicon-smile"
          class="fbBtns"
        >
          {{ $t('m.weiyou_emoji') }}
        </el-button>
        <je-emoji-popover
          :visible="visibleMailEmoji"
          :placement="'top-start'"
          :trigger-el="triggerElement"
          @select="selectEmojis"
        />
      </el-form-item>

      <el-form-item>
        <el-row :gutter="20">
          <el-col
            :span="6"
            v-for="(item, index) in getFileList"
            :key="index"
          >
            <div class="grid-content">
              <span style="float: left">
                <i
                  v-if="item.fileType == 'excel'"
                  class="slImg jeicon jeicon-excel"
                  style="color: rgb(0, 132, 62);"
                />
                <i
                  v-else-if="item.fileType == '图片'"
                  class="slImg jeicon jeicon-image"
                  style="color: rgb(255, 119, 68);"
                />
                <i
                  v-else-if="item.fileType == 'word'"
                  class="slImg jeicon jeicon-word"
                  style="color: rgb(0, 87, 170);"
                />
                <i
                  v-else-if="item.fileType == '文本'"
                  class="slImg jeicon jeicon-txt"
                  style="color: rgb(43, 162, 68);"
                />
                <i
                  v-else-if="item.fileType == 'pdf'"
                  class="slImg jeicon jeicon-pdf"
                  style="color: rgb(229, 44, 14);"
                />
                <i
                  v-else-if="item.fileType == 'ppt'"
                  class="slImg jeicon jeicon-ppt"
                  style="color: rgb(243, 78, 25);"
                />
                <i
                  v-else-if="item.fileType == '压缩包'"
                  class="slImg jeicon jeicon-zip"
                  style="color: rgb(251, 175, 50);"
                />
                <i
                  v-else
                  class="slImg jeicon jeicon-unknownfile"
                />
              </span>

              <div
                :title="item.name"
                class="fileName"
              >
                {{ item.name }}
              </div>
              <div class="deleteIcon">
                <i
                  @click="deleteFile(item,index)"
                  class="jeicon jeicon-trash-o"
                />
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        @click="createMail"
        type="primary"
      >
        {{ $t('m.weiyou_send') }}
      </el-button>
      <el-button @click="dialogVisible = false">
        {{ $t('m.weiyou_close') }}
      </el-button>
    </div>

    <full-screen-editor
      ref="fsEditor"
      :contents="editorContent"
      @finishInput="finishInput"
    />
  </el-dialog>
</template>
<script>
import JEEmojiPopover from '../../../components/emoji/index.vue';
import UserNames from './userNamesDialog';
import FullScreenEditor from '../../../components/fullscreenEditor/fullscreenEditor';
import { createMyMail } from '../actions/actions';
import returnMsg from '../assets/lang/speNationalList';

import getMaxZindex from '../util/getZindex';

export default {
  name: 'CreateMail',
  components: { 'je-emoji-popover': JEEmojiPopover, UserNames, FullScreenEditor },
  props: {
    handleType: {
      type: String,
      default: 'create',
    },
    mailCnt: {
      type: Object,
      default() {
        return {};
      },
    },
    mailObj: {
      type: Object,
      default() {
        return {
          id: '',
          funcCode: '',
          funcName: '',
          modelId: '',
          modelName: '',
        };
      },
    },
    params: {
      type: Object,
      default() {
        return {
          funcCode: '',
          pkValue: '',
          bean: {},
        };
      },
    },
    cloudFile: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      lang: JE.getCookies('je-local-lang') || 'zh_CN', // 当前语言环境
      createForm: {
        selectUsersNameSting: '',
        mailTheme: '',
        checkedRules: [this.lang == 'zh_CN' ? '开放讨论' : 'Open discussion'],
      },
      formLabelWidth: '80px',
      dialogVisible: false,
      persons: [],
      timeout: null,
      types: [
        { text: '全公司', entext: 'Full company', code: 'all' },
        { text: '指定分公司', entext: 'Designated branch', code: 'company' },
        { text: '指定部门', entext: 'Designated department', code: 'dept' },
        { text: '指定角色', entext: 'Designated role', code: 'role' },
        { text: '指定人员', entext: 'Designated person', code: 'user' },
      ],
      choosedType: '',
      rules: [
        { text: '保密', entext: 'Secrecy', disabled: false },
        { text: '分别发送', entext: 'Send separately', disabled: false },
        { text: '开放讨论', entext: 'Open discussion', disabled: false },
        { text: '水印', entext: 'Watermark', disabled: false },
      ],
      fileList: [],
      visibleMailEmoji: false,
      triggerElement: '',
      fileCountLimit: 6, // 文件上传数量限制
      selectUsersName: [], // 选中的name集合
      selectUsersId: [], // 选中的id集合
      requestMap: {}, // 后台人员选择接受数据map字段
      UEditor: null,
      editorContent: '',
      regContent: '', // 获取最后输入的匹配内容
      langLocal: '', // 国际化
      funcData: {
        funcCode: '',
        funcId: '',
        funcName: '',
        tableCode: '',
      }, // 业务数据的功能数据集合
      modelName: '', // 业务数据的名称
      mainUserIds: [], // 主送人id集合
      mainUserNames: [], // 主送人name集合
    };
  },
  computed: {
    getFileList() {
      this.fileList.forEach((item, index) => {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.fileList[index].pathKey = item.url;

        const postfix = item.name.substring(item.name.lastIndexOf('.') + 1, item.name.length).toLowerCase();

        switch (postfix) {
          case 'jpg': case 'jpeg': case 'png': case 'gif': case 'bmp': case 'psd': case 'tiff':
            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            this.fileList[index].fileType = '图片';
            break;
          case 'txt':
            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            this.fileList[index].fileType = '文本';
            break;
          case 'doc': case 'docx':
            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            this.fileList[index].fileType = 'word';
            break;
          case 'xls': case 'xlsx':
            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            this.fileList[index].fileType = 'excel';
            break;
          case 'pdf':
            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            this.fileList[index].fileType = 'pdf';
            break;
          case 'zip': case 'rar': case 'cab': case 'iso': case 'jar': case 'ace': case '7z': case 'tar': case 'gz': case 'arj':
            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            this.fileList[index].fileType = '压缩包';
            break;
          case 'ppt': case 'pptx':
            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            this.fileList[index].fileType = 'ppt';
            break;
          default:
            break;
        }
      });
      return this.fileList;
    },
  },
  watch: {
    dialogVisible(nv) {
      if (nv) {
        this.$nextTick(() => {
          $('#createMailDialog .el-dialog__body').css({ height: `${document.getElementById('createMailDialog').offsetHeight - 124}px` });
          // 初始化值
          if (this.handleType === 'create') {
            this.resetValues();
            if (this.params.funcCode) {
              this.funcData = JE.getFuncData(this.params.funcCode).info;
              const otherCfg = this.funcData.otherConfig;
              const jemailTpl = JE.getObjAttr(otherCfg, 'jemailTpl');
              this.modelName = JE.toXT(jemailTpl, this.params.bean);
            }
          } else if (this.handleType === 'edit') {
            this.echoValues();
          }
          // 处理展示层级
          $('#createMailDialog').css({ 'z-index': getMaxZindex() + 2 });
          // 监听dialog  点击事件
          document.getElementById('createMailDialog').onclick = () => {
            this.visibleMailEmoji = false;
          };
          const that = this;
          // 监听收件人input键盘删除事件
          $('input[popperclass="my-autocomplete"]').on('keydown', (e) => {
            // backspace == 8
            if (e.keyCode == 8 || e.which == 8) {
              // 如果最后一个字符是  ，  则直接删除整个 名字，  否则只删除内容
              if (e.target.value.lastIndexOf('，') == e.target.value.length - 1) {
                delete that.requestMap[that.selectUsersId[that.selectUsersId.length - 1]];
                that.selectUsersId.pop();
                $('input[popperclass="my-autocomplete"]').focus();
                return false;
              }
            }
          });

          // 富文本编辑器
          const editorCfg = {
            autoHeightEnabled: false,
            enableAutoSave: false,
            allowDivTransToP: false, // 阻止div标签自动转换为p标签
            toolbars: [[
              'undo', 'redo', '|',
              'bold', 'italic', 'underline', 'forecolor', 'backcolor', 'fontfamily', 'fontsize', '|',
              'insertorderedlist', 'insertunorderedlist', '|',
              'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify',
            ]],
            // 关闭字数统计
            wordCount: false,
            maximumWords: 100000000000000,
            // 关闭elementPath
            elementPathEnabled: false,
          };
          this.UEditor = UE.getEditor('mail-uEditor', editorCfg);

          this.UEditor.ready(() => {
            // 处理编辑器toolbar下拉选择  被遮挡的问题
            $('#mail-uEditor .edui-editor').css({ 'z-index': getMaxZindex() + 1 });
            if (this.handleType == 'edit') {
              // 桌面端图片链接处理
              this.mailCnt.zw = JE.buildUeditorImgUrl(this.mailCnt.zw);
              this.UEditor.setContent(this.mailCnt.zw);
            }
          });
          // 内容改变
          this.UEditor.addListener('contentChange', () => {
            this.editorContent = this.UEditor.getContent();
          });
        });
      } else {
        this.UEditor && this.UEditor.destroy();
      }
    },
    // 监听收件人输入框内容改变
    'createForm.selectUsersNameSting': {
      handler(nv) {
        if (nv) {
          const lastIndex = nv && nv.lastIndexOf('，');
          if (lastIndex !== (nv.length - 1)) {
            this.regContent = nv.substring(lastIndex + 1);
          } else {
            this.regContent = '';
          }
        }
      },
    },
    // 监听选择的收件人id集合
    selectUsersId: {
      handler(nv) {
        this.selectUsersName = [];
        if (nv.indexOf('all') == -1) {
          this.rules[0].disabled = false;
        }
        nv.forEach((id) => {
          this.selectUsersName.push(this.requestMap[id].name);
        });
        if (this.selectUsersName.length > 0) {
          this.$set(this.createForm, 'selectUsersNameSting', `${this.selectUsersName.join('，')}，`);
        } else {
          this.$set(this.createForm, 'selectUsersNameSting', `${this.selectUsersName.join('，')}`);
        }
      },
      deep: true,
    },
  },
  mounted() {
    // 人员头像处理
    const me = this;
    if (!JE.isNotEmpty(JE.__USERS__)) {
      $(document).on('mysubscrible', () => {
        me.persons = me.loadAll();
      });
    } else {
      // 获取所有的人员匹配项
      this.persons = this.loadAll();
    }
    this.langLocal = JE.getLocalLang('sys.cooperation');
  },
  methods: {
    // 打开全屏
    openFsEditor() {
      this.$refs.fsEditor.fullscreenVisible = true;
    },
    // 全屏编辑结束
    finishInput(cnt) {
      // 桌面端图片链接处理
      const contents = JE.buildUeditorImgUrl(cnt);
      this.UEditor.setContent(contents);
    },
    // 创建  初始化值
    resetValues() {
      this.createForm = {
        selectUsersNameSting: '',
        mailTheme: '',
        checkedRules: [this.lang == 'zh_CN' ? '开放讨论' : 'Open discussion'],
      };
      this.fileList = this.cloudFile; // 接收 网盘的文件数据
      this.selectUsersName = [];
      this.selectUsersId = [];
      this.fileCountLimit = 6;
      this.requestMap = {};
      this.choosedType = '';
      this.rules[0].disabled = false;
      this.mainUserIds = [];
      this.mainUserNames = [];
      this.funcData = {
        funcCode: '',
        funcId: '',
        funcName: '',
        tableCode: '',
      };
      this.regContent = '';// 获取最后输入的匹配内容
    },
    // 根据 order字段 排序
    arraySort(arr) {
      const field = 'order';
      arr.sort((a, b) => {
        if (a[field] < b[field]) {
          return -1;
        }
        if (a[field] > b[field]) {
          return 1;
        }
        return 0;
      });
      return arr;
    },
    // 编辑  回显值
    echoValues() {
      this.createForm.mailTheme = this.mailCnt.zt;
      this.fileList = this.mailCnt.file;
      this.rules[1].disabled = true;

      this.createForm.checkedRules = [];
      if (this.mailCnt.kftl) {
        this.createForm.checkedRules.push(this.lang == 'zh_CN' ? '开放讨论' : 'Open discussion');
      }
      if (this.mailCnt.bm) {
        this.createForm.checkedRules.push(this.lang == 'zh_CN' ? '保密' : 'Secrecy');
      }
      if (this.mailCnt.sy) {
        this.createForm.checkedRules.push(this.lang == 'zh_CN' ? '水印' : 'Watermark');
      }

      // 收件人回显
      this.requestMap = this.mailCnt.sjr;
      let userArr = [];
      const userIdsArr = [];
      this.mainUserIds = [];
      Object.keys(this.requestMap).forEach((item) => {
        // 主送人
        if (this.requestMap[item].sfszsr) {
          this.mainUserIds.push(item);
        }
        if (item == 'all') {
          this.rules[0].disabled = true;
        }
        // 选中的人员
        userArr.push(this.requestMap[item]);
      });
      userArr = this.arraySort(userArr);
      userArr.forEach((item) => {
        userIdsArr.push(item.id);
      });
      this.selectUsersId = userIdsArr;
    },
    // 打开已选收件人弹窗
    openUserDialog() {
      this.$refs.userNameDialog.checkedUserVisible = true;
    },
    // 获取拖拽或者删除后的人员
    dragUser(ids, map) {
      this.selectUsersId = ids;
      if (!this.selectUsersId.includes('all')) {
        this.rules[0].disabled = false;
      }
      this.requestMap = map;
    },
    // 展示表情弹窗
    showEmojis() {
      this.visibleMailEmoji = !this.visibleMailEmoji;
      this.triggerElement = this.$refs.emojiButton.$el;
    },
    // 选择表情
    selectEmojis(emoji) {
      // this.UEditor.setContent(, true);
      this.UEditor.execCommand('insertHtml', `<span>${emoji}</span>`);
    },
    // 选择图片
    selectImage() {
      if (this.fileList.length >= 6) {
        JE.msg(returnMsg('已达到最大上传个数，请删除后在进行上传'));
        return false;
      }
      const count = this.fileCountLimit - this.fileList.length;
      const me = this;
      JE.uploadFile({
        width: 800,
        height: 500,
        fileTypes: '*',
        fileCount: count, // 最多上传数量
        multiSelect: true,
        uploadFileType: 'func',
        post_params: { uploadType: 'OTHER' },
        callback(file, data) {
          if (data.success) {
            me.fileList.push(file);
          } else {
            JE.msg(data.message);
          }
        },
      });
    },
    // 点击发布
    createMail() {
      if (this.selectUsersId.length === 0) {
        return JE.msg(returnMsg('收件人不能为空，请选择!'));
      }
      if (!this.createForm.mailTheme.trim()) {
        return JE.msg(returnMsg('主题不能为空，请输入!'));
      }
      if (!this.UEditor.getContent().trim()) {
        return JE.msg(returnMsg('正文不能为空，请输入!'));
      }

      // 收件人  加排序字段
      this.selectUsersId.forEach((id, index) => {
        this.requestMap[id].order = index;
      });

      // 设置主送人
      this.mainUserIds.forEach((item) => {
        if (this.requestMap[item] && this.requestMap[item].id == item) {
          this.requestMap[item].sfszsr = true;
        }
      });

      const params = {
        recipient: JSON.stringify(this.requestMap),
        zw: this.UEditor.getContent(),
        zt: this.createForm.mailTheme,
        bm: false,
        fbfs: false,
        kftl: false,
        sy: false,
        id: this.handleType == 'create' ? '' : this.mailObj.id,
        funcId: this.handleType == 'create' ? this.funcData.funcId : this.mailObj.funcId,
        funcCode: this.handleType == 'create' ? this.funcData.funcCode : this.mailObj.funcCode,
        funcName: this.handleType == 'create' ? this.funcData.funcName : this.mailObj.funcName,
        tableCode: this.handleType == 'create' ? this.funcData.tableName : this.mailObj.tableCode,
        modelId: this.handleType == 'create' ? this.params.pkValue : this.mailObj.modelId,
        modelName: this.handleType == 'create' ? this.modelName : this.mailObj.modelName,
        file: JSON.stringify(this.getFileList),
      };
      this.createForm.checkedRules.forEach((item) => {
        switch (item) {
          case this.lang == 'zh_CN' ? '保密' : 'Secrecy':
            params.bm = true;
            break;
          case this.lang == 'zh_CN' ? '分别发送' : 'Send separately':
            params.fbfs = true;
            break;
          case this.lang == 'zh_CN' ? '开放讨论' : 'Open discussion':
            params.kftl = true;
            break;
          case this.lang == 'zh_CN' ? '水印' : 'Watermark':
            params.sy = true;
            break;
          default:
            break;
        }
      });
      createMyMail(params).then((res) => {
        if (res.success) {
          this.dialogVisible = false;
          this.$emit('doCreate');
          // 发布成功之后，富文本编辑器里面的内容要清空
          this.editorContent = '';
          JE.msg(returnMsg('发送成功!'));
        } else {
          JE.msg(returnMsg('发送失败!'));
        }
      });
    },
    // 匹配项数组去重
    dedupe(array) {
      const res = new Map();
      return array.filter(a => !res.has(a.id) && res.set(a.id, 1));
    },
    // 加载全部查询匹配项
    loadAll() {
      const users = Object.entries(JE.__USERS__);
      const personsList = [];
      users.forEach((item) => {
        personsList.push(item[1]);
      });
      this.persons = this.dedupe(personsList);
      this.persons.forEach((item, index) => {
        this.persons[index].sfszsr = false;
        this.persons[index].photoUrl = JE.getUserPhoto(item.id);
      });
      return this.persons;
    },
    // 前端查询
    querySearchAsync(queryString, cb) {
      const { persons } = this;
      const results = this.regContent ? persons.filter(this.createStateFilter(this.regContent)) : persons;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
        setTimeout(() => {
          // 处理输入匹配项后   相同字体高亮
          if (this.regContent) {
            const re = new RegExp(this.regContent, 'g'); // 定义正则表达式
            const doms = $('.el-autocomplete-suggestion__list li');
            doms.each((index, element) => {
              $(element).html($(element).html().replace(re, `<span style="color: #409EFF">${this.regContent}</span>`));
            });
          }
        }, 100);
      }, 500 * Math.random());
    },
    // 过滤
    createStateFilter(queryString) {
      return state => (state.name.indexOf(queryString) === 0);
    },
    // 选择匹配项
    handleSelect(item) {
      item.type = 'user';
      if (!this.selectUsersId.includes(item.id)) {
        this.selectUsersId.push(item.id);
        this.requestMap[item.id] = item;
      }
      if (this.selectUsersName.length > 0) {
        this.$set(this.createForm, 'selectUsersNameSting', `${this.selectUsersName.join('，')}，`);
      } else {
        this.$set(this.createForm, 'selectUsersNameSting', `${this.selectUsersName.join('，')}`);
      }
    },
    // 树查询
    selectWin_(options) {
      const that = this;
      JE.selectWin({
        type: 'tree',
        configInfo: options.configInfo,
        value: options.value,
        valueType: 'id',
        callback(res) {
          const oldIds = [];
          that.selectUsersId.forEach((id) => {
            if (that.requestMap[id].type != options.type) {
              oldIds.push(id);
            } else {
              delete that.requestMap[id];
            }
          });
          const newIds = [];
          res.forEach((item) => {
            const obj = {
              id: item.data.id,
              name: item.data.text,
              code: item.data.code,
              sfszsr: false,
              type: options.type,
            };
            newIds.push(obj.id);
            that.requestMap[obj.id] = obj;
          });
          that.selectUsersId = oldIds.concat(newIds);
        },
      });
    },
    // 选择下拉菜单项
    handleChoose(cmd) {
      this.choosedType = cmd.code;
      const deptIds = [];
      const companyIds = [];
      const roleIds = [];
      const userIds = [];
      this.selectUsersId.forEach((id) => {
        if (this.requestMap[id].type == 'dept') {
          deptIds.push(id);
        } else if (this.requestMap[id].type == 'role') {
          roleIds.push(id);
        } else if (this.requestMap[id].type == 'company') {
          companyIds.push(id);
        } else if (this.requestMap[id].type == 'user') {
          userIds.push(id);
        }
      });
      const that = this;
      switch (cmd.code) {
        case 'all':
          if (!this.selectUsersId.includes('all')) {
            this.selectUsersId.push('all');
            this.requestMap.all = {
              id: 'all', name: '全公司', sfszsr: false, type: 'all',
            };
          }
          this.rules[0].disabled = true;
          if (this.createForm.checkedRules.includes(this.lang == 'zh_CN' ? '保密' : 'Secrecy')) {
            this.createForm.checkedRules.splice(this.createForm.checkedRules.indexOf(this.lang == 'zh_CN' ? '保密' : 'Secrecy'), 1);
          }
          break;
        case 'dept':
          this.selectWin_({
            configInfo: 'JE_RBAC_DEPARTMENT,,,M',
            value: deptIds.join(','),
            type: cmd.code,
          });
          break;
        case 'company':
          this.selectWin_({
            configInfo: 'JE_RBAC_COMPANYMENT,,,M',
            value: companyIds.join(','),
            type: cmd.code,
          });
          break;
        case 'role':
          this.selectWin_({
            configInfo: 'JE_RBAC_ROLE,,,M',
            value: roleIds.join(','),
            type: cmd.code,
          });
          break;
        case 'user':
          JE.vue.selectUser({
            title: that.langLocal.win.popleText,
            height: JE.getBodyHeight() > 650 ? 650 : JE.getBodyHeight() - 150,
            configInfo: 'JE_CORE_DEPTUSER_NODISABLE,,,M',
            type: 'tree',
            value: userIds.join(','),
            valueType: 'id',
            callback(recs) {
              const olduserIds = [];
              that.selectUsersId.forEach((id) => {
                if (that.requestMap[id].type != 'user') {
                  olduserIds.push(id);
                } else {
                  delete that.requestMap[id];
                }
              });
              const newIds = [];
              recs.forEach((item) => {
                const obj = {
                  id: item.id,
                  name: item.text,
                  sfszsr: false,
                  type: 'user',
                };
                newIds.push(obj.id);
                that.requestMap[obj.id] = obj;
              });

              that.selectUsersId = olduserIds.concat(newIds);
            },
          });
          break;
        default:
          break;
      }
    },
    // 设置主送人
    setMainUser() {
      const that = this;
      JE.vue.selectUser({
        title: that.langLocal.win.popleText,
        height: JE.getBodyHeight() > 650 ? 650 : JE.getBodyHeight() - 150,
        configInfo: 'JE_CORE_DEPTUSER_NODISABLE,,,M',
        type: 'tree',
        value: that.mainUserIds.join(','),
        valueType: 'id',
        callback(recs) {
          that.mainUserIds = [];
          that.mainUserNames = [];
          recs.forEach((item) => {
            const obj = {
              id: item.id,
              name: item.text,
            };
            that.mainUserIds.push(obj.id);
            that.mainUserNames.push(obj.name);
          });
        },
      });
    },
    // 删除附件
    deleteFile(item, index) {
      this.fileList.splice(index, 1);
    },

  },
};
</script>
<style lang="scss">
.zhusongren{
  z-index: 100000 !important;
}
.my-autocomplete {
  z-index: 50000 !important;
  li {
    line-height: normal;
    padding: 7px;
    .name {
      overflow: hidden;
      padding-left: 10px;
      line-height: 36px;
      .headerImg {
        float: left;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
        span {
          display: inline-block;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          overflow: hidden;
          text-align: center;
          background-color: #efa544;
          line-height: 37px;
          color: #fff;
          font-size: 12px;
        }
      }
    }
  }
}
#createMailDialog {
  overflow: inherit;
}

.downMenu{
  z-index: 50000 !important;
}
.createDialog {
  height: 100%;
  .el-autocomplete-suggestion {
    width: 371px !important;
  }
  .el-autocomplete {
    width: 100%;
    .el-input--suffix .el-input__inner {
      padding-right: 60px;
    }
    .jeicon-user-add:hover {
      color: #386bd0;
      cursor: pointer;
    }
    .jeicon-user-add,
    .jeicon-more {
      color: #e0dede;
      margin-right: 6px;
      cursor: pointer;
    }
    .jeicon-more:hover {
      color: #409eff;
    }
  }
  .formatCont {
    margin-bottom: 0;
    .el-form-item__content {
      line-height: 10px;
      color: #999;
    }
  }
  .zt-input {
    .el-input__count .el-input__count-inner {
      line-height: 1;
    }
  }
  .el-dialog__footer {
    text-align: center;
    .el-button--primary {
      background-color: #386ad0;
      border-color: #386ad0;
    }
    .el-button--primary:hover {
      background-color: #409eff;
      border-color: #409eff;
    }
  }
  .el-dialog__body {
    overflow-y: auto;
  }

  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .el-dialog__title {
    font-size: 22px;
    font-weight: 500;
    color: rgba(68, 68, 68, 1);
  }

  .grid-content {
    border-radius: 4px;
    height: 36px;
    background-color: #fafbfc;
    overflow: hidden;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    .slImg {
      width: 36px;
      height: 100%;
      font-size: 24px;
    }
    .fileName {
      float: left;
      width: 190px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 26px;
      line-height: 26px;
      border-right: 1px solid #e6e8eb;
      padding-left: 5px;
    }
    .deleteIcon {
      flex: 1;
      float: left;
      text-align: center;
      cursor: pointer;
    }
  }
}

.ue-editor {
  .el-form-item__content {
    line-height: normal;
  }
  .fsIcon {
    position: absolute;
    top: 30px;
    left: -30px;
    color: #999;
  }
  .fsIcon:hover {
    color: #409eff;
  }
}

.fbBtns {
  color: #606468;
  font-size: 13px;
}
.fbBtns:last-child {
  margin-left: 32px;
}
.setOwner {
  color: #376ace;
  margin-left: 30px;
}
</style>
